<template>
  <!-- 歌曲列表 -->
  <template v-if="loadingIsShow">
    <van-loading type="spinner" class="loading" />
  </template>
  <template v-else>
    <sings-list-vue :searchData="searchData"></sings-list-vue>
  </template>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import axios from "axios";
import singsListVue from "../../../singsList/singsList.vue";

const store = useStore();
const route = useRoute();

// loading
const loadingIsShow = ref(true);

// 选中歌单歌曲信息
const searchData = ref({});
searchData.value = store.state.m_search.searchData;

// 获取歌单所有歌曲
const getSongSingAll = async () => {
  await axios
    .get(
      `http://localhost:3000/playlist/track/all?id=${store.state.m_song.songListId}&cookie=${store.state.m_user.cookie}`
    )
    .then((res) => {
      searchData.value = { result: res.data };
      console.log(searchData.value);
      store.commit("m_player/updateCountListData", res.data.songs.length);
      store.commit("m_song/updateSongListData", res.data.songs);
      loadingIsShow.value = false;
    })
    .catch((err) => {
      loadingIsShow.value = false;
      console.error(err);
    });
};

onMounted(() => {
  getSongSingAll();
  console.log(11111);
});
</script>
<style lang='less'>
</style>